// 在文件顶部添加导入语句
import bootstrapCSS from "bootstrap/dist/css/bootstrap.min.css?inline";

export class BaseComponent extends HTMLElement {
  private bootstrap: any;
  protected basePath: string;

  constructor() {
    super();

    // 创建影子标签
    const shadow = this.attachShadow({ mode: "open" });
    this.BasePath();
    // 引入样式和脚本
    this.loadStyles(shadow);
    this.loadScript(shadow);

    // 引入 HtmlText
    this.loadTemplate(shadow);
  }

  ClassName() {
    return "BaseComponent";
  }

  BasePath() {
    // 获取当前模块的 URL 路径
    const currentModuleURL = new URL(import.meta.url);
    this.basePath = currentModuleURL.pathname.substring(
      0,
      currentModuleURL.pathname.lastIndexOf("/") + 1
    );
    console.log(`Create ${this.ClassName()}, basePath: ` + this.basePath);
  }

  // 添加类似Vue的mounted生命周期钩子
  connectedCallback() {
    // 组件被添加到文档后执行
    // 动态导入并初始化 Bootstrap JS
    import("bootstrap")
      .then((bootstrapModule) => {
        this.bootstrap = bootstrapModule.default;
        console.log("Bootstrap JS initialized in MainRegion");

        // 如果需要初始化特定组件，可以在这里进行
        // 例如：new this.bootstrap.Modal(document.getElementById('myModal'));
      })
      .catch((err) => {
        console.error("Failed to load Bootstrap JS:", err);
      });
  }

  // 添加类似Vue的beforeDestroy生命周期钩子
  disconnectedCallback() {
    // 组件被移除时的清理工作
    console.log(`${this.ClassName()} component removed from DOM`);
    this.cleanupEventListeners();
  }

  // 加载样式
  private loadStyles(shadow: ShadowRoot) {
    const styleSheet = new CSSStyleSheet();
    styleSheet.replaceSync(bootstrapCSS);
    shadow.adoptedStyleSheets = [styleSheet];

    const linkEle = document.createElement("link");
    linkEle.setAttribute("rel", "stylesheet");
    linkEle.setAttribute("type", "text/css");
    linkEle.setAttribute("href", `${this.basePath}${this.ClassName()}.css`);
    shadow.appendChild(linkEle);
  }

  // 加载脚本
  private loadScript(shadow: ShadowRoot) {
    // const scriptEle = document.createElement("script");
    // scriptEle.setAttribute("src", `${this.basePath}${this.ClassName()}.js`);
    // scriptEle.setAttribute("defer", "true");
    // shadow.appendChild(scriptEle);
  }

  // 加载模板
  private loadTemplate(shadow: ShadowRoot) {
    fetch(`${this.basePath}${this.ClassName()}.html`)
      .then((response) => {
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.text();
      })
      .then((html) => {
        const div = document.createElement("div");
        div.innerHTML = html;
        const templateD = div.getElementsByTagName("template")[0];
        if (templateD) {
          shadow.appendChild(templateD.content.cloneNode(true));
          // 在模板加载完成后初始化组件
          this.initializeComponent();
        } else {
          console.error(`Template not found in ${this.ClassName()}.html`);
        }
      })
      .catch((error) => {
        console.error("Failed to load template:", error);
      });
  }

  // 初始化组件方法
  private initializeComponent() {
    // 在这里可以添加组件初始化逻辑
    // 类似Vue的mounted中的逻辑
    console.log("Component initialized");
    this.setupEventListeners();
  }

  // 设置事件监听器
  private setupEventListeners() {
    if (!this.shadowRoot) return;

    // 监听Shadow DOM内部的事件
    this.shadowRoot.addEventListener("click", (e) => {
      this.handleButtonClick(e);
    });
  }

  // 清理事件监听器
  private cleanupEventListeners() {
    if (!this.shadowRoot) return;

    this.shadowRoot.removeEventListener("click", this.handleButtonClick);
  }

  // 处理按钮点击事件
  protected handleButtonClick(event: Event) {
    // 类似Vue中的methods
    const myShadowRoot = this.shadowRoot;
    if (!myShadowRoot) return;
    //这里调用leftRegion.js中的方法
    // handleClick( event, myShadowRoot);
  }
}
